<template>
    <div class="container">
        <div class="left">
            <div class="top">
                <div class="echart">
                    <echart-one></echart-one>
                </div>
                <div class="pay">
                    <div>
                        <p>昨日成交额</p>
                        <p>4024.32万元</p>
                    </div>
                    <div>
                        <p>本周成交额</p>
                        <p>142322.88万元</p>
                    </div>
                    <div>
                        <p>本月成交额</p>
                        <p>1231402.32万元</p>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <echart-two></echart-two>
            </div>
        </div>
        <div class="right">
            <img src="@/images/zyd.jpg">
        </div>
    </div>
</template>

<script>
import EchartOne from './echartsOne.vue'
import EchartTwo from './echartsTwo.vue'
export default {
    components: {EchartOne, EchartTwo}
}
</script>
<style lang="less" scoped>
    .container {
        display: flex;
        width: 100%;
        min-width: 65rem;
        height: 100%;
        border-radius: 10px;
        padding: .5rem;
        overflow: auto;
        > .left {
            width: 50rem;
            height: 25rem;
            > .top {
                width: 100%;
                height: 25rem;
                > .echart {
                    float: left;
                    width: 30rem;
                    height: 25rem;
                    border-radius: 1rem;
                    overflow: hidden;
                    box-shadow: 3px 2px 10px -1px rgba(0, 0, 0, .3);
                }
                > .pay {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                    width: 18rem;
                    height: 25rem;
                    float: right;
                    > div {
                        background: linear-gradient(130deg, #ee59a4, #bc6eef);
                        width: 15rem;
                        height: 25%;
                        padding: .5rem;
                        box-shadow: 3px 2px 10px -1px rgba(0, 0, 0, .3);
                        border-radius: 1rem;
                        > p {
                            height: 50%;
                            padding-left: 2rem;
                            line-height: 2.625rem;
                            color: #fff;
                        }
                        > p:first-child {
                            font-size: .9rem;
                        }
                        > p:last-child {
                            font-size: 1.4rem;
                        }
                    }
                    > div:nth-child(2) {
                        background: linear-gradient(130deg, #3dd9d4, #24b0d5);
                    }
                    > div:last-child {
                        background: linear-gradient(130deg, #f8bf87, #f66e73);
                    }
                }
                &:before {
                    content: '';
                    display: block;
                    height: 0;
                    clear: both;
                }
            }
           > .bottom {
                height: 15rem;
                width: 100%;
                margin-top: 1rem;
                background-color: #fff;
                border-radius: 1rem;
                box-shadow: 3px 2px 10px -1px rgba(0, 0, 0, .3);
           } 
        }
        > .right {
            margin-left: 1rem;
            width: 15rem;
            height: 41rem;
            border-radius: 1rem;
            background-color: #fff;
            box-shadow: 3px 2px 10px -1px rgba(0, 0, 0, .3);
            overflow: hidden;
            > img {
                width: 100%;
                height: 100%;
            }
        }
    }   
</style>